<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-16 09:08:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-23 09:26:29
-->
<template>
  <span class="title">
    营销标签
  </span>
  <button class="label-button">
    陪同办签
    <i
      class="el-icon-delete"  
      style="color: gray"
    />
  </button>
  <button>
    <el-button
      type="text"
      @click="methods.open"
      class="plus-button"
    >
      <i class="el-icon-plus" />
    </el-button>
  </button>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    width="30%"
  >
    <span>这是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >
          确 定
        </el-button>
        <el-button @click="dialogVisible = false">
          取 消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import LabelDialogVue$1 from './marketingLabel/LabelDialog.vue'

export default defineComponent({
  setup() {
    const dialogVisible = ref(false)
    const methods = reactive({
      open() {
        ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '选择营销标签', {
          confirmButtonText: '确认选择',
          cancelButtonText: '取消',
          type: 'warning'
        })
      }
    })

    return {
      methods,
      dialogVisible
    }
  }

})
</script>

<style lang="scss" scoped>
.title {
  margin-right: 30px;
}
.label-button {
  border: 1px solid gray;
  margin-right: 10px;

}
.plus-button {
  color: #555;
}
</style>

